<template>
	<div class="profile">
		<el-icon size="32" @click="handleBack()">
			<ArrowLeft style="cursor: pointer" />
		</el-icon>

		<div class="flex-c-c">
			<div class="avatar">
				<img style="margin: 0 auto; display: block" src="/images/9.jpg" alt="" />
				<div class="money">0.002</div>
				<p class="name">Kikyō</p>
				<div class="flex-c-c" style="margin-top: 10px">
					<div style="padding: 6px 16px; border-radius: 6px; background: #e7e7e7; margin-right: 10px">#145,122</div>
					<img @click="handleOpen" style="width: auto; height: 30px; margin-right: 10px" src="/images/twitter.png" alt="" />
					<div style="padding: 6px 16px; border-radius: 6px; background: #e7e7e7; margin-right: 10px">#1,122</div>
					<img @click="handleOpen" style="width: 30px; height: 30px; cursor: pointer" src="/favicon.ico" alt="" />
				</div>
			</div>
		</div>

		<div class="content flex-b-c">
			<button @click="dialogVisible = true">Buy</button>

			<div class="flex-s-c">
				<el-icon color="#ffffff" size="22" style="padding: 10px; border: 1px solid #ffffff; border-radius: 50%">
					<Star />
				</el-icon>
				<el-icon color="#ffffff" size="22" style="margin-left: 20px; padding: 10px; border: 1px solid #ffffff; border-radius: 50%">
					<ChatRound />
				</el-icon>
			</div>
		</div>

		<div class="table flex-b-c">
			<div class="table-left flex-s-c">
				<p :class="active === 1 ? 'active' : ''" @click="handleChange(1)">Keys</p>
				<p :class="active === 2 ? 'active' : ''" @click="handleChange(2)">Trades</p>
				<p :class="active === 3 ? 'active' : ''" @click="handleChange(3)">Holders</p>
				<p :class="active === 4 ? 'active' : ''" @click="handleChange(4)">Holding</p>
			</div>
			<el-icon size="24" color="#999999">
				<Refresh />
			</el-icon>
		</div>

		<div class="table-content" v-if="active === 1">
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/7.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 8 Oxy Keys</p>
					<p><span>0.248ETH</span>, 11h ago</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/3.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 7 Oxy Keys</p>
					<p><span>0.248ETH</span>, 20h ago</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar">
					<img src="/images/9.jpg" alt="" />
					<img src="/images/5.jpg" alt="" />
				</div>
				<div class="item-right">
					<p>CBBOFE sold 33 Oxy Keys</p>
					<p><span>0.248ETH</span>, 1day ago</p>
				</div>
			</div>
		</div>
		<div class="table-content" v-if="active === 4">
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/4.jpg" alt="" />
					<p style="margin-left: 10px">Jacksonwun</p>
				</div>
				<div class="item-right">
					<p>0.002ETH</p>
					<p>$3.62</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/2.jpg" alt="" />
					<p style="margin-left: 10px">Asaaa</p>
				</div>
				<div class="item-right">
					<p>13.5ETH</p>
					<p>$959.62</p>
				</div>
			</div>
			<div class="item flex-s-c">
				<div class="avatar flex-s-c" style="width: 180px">
					<img src="/images/3.jpg" alt="" />
					<p style="margin-left: 10px">Json</p>
				</div>
				<div class="item-right">
					<p>0.012ETH</p>
					<p>$18.92</p>
				</div>
			</div>
		</div>
		<div class="table-content" v-if="active != 1 && active != 4">Buy friends' keys to see them here</div>

		<el-dialog v-model="dialogVisible" title="Buy" width="300px" :before-close="handleClose">
			<div class="dialog">
				<button style="display: block; margin-bottom: 30px">Buy a Key</button>
				<button style="display: block">Sell a Key</button>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">Cancel</el-button>
					<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { ArrowLeft, ChatRound, Refresh, Star } from "@element-plus/icons";
import { useRouter } from "vue-router";
import { ref } from "vue";

const dialogVisible = ref(false);
const router = useRouter();
const handleBack = () => {
	router.back();
};

const handleClose = () => {
	dialogVisible.value = false;
};

const active = ref(1);
const handleChange = (index) => {
	active.value = index;
};

const handleOpen = () => {
	window.open("https://sidekick.fans/personal/66118");
};
</script>

<style scoped lang="scss">
.profile {
	.avatar {
		position: relative;

		img {
			width: 120px;
			height: 120px;
			border-radius: 50%;
			background: #efefef;
		}

		.money {
			position: absolute;
			width: 110px;
			height: 40px;
			border-radius: 20px;
			background: #00b9f4;
			text-align: center;
			line-height: 40px;
			color: #ffffff;
			top: 110px;
			left: 50%;
			transform: translateX(-50%);
		}

		.name {
			margin-top: 40px;
			text-align: center;
			font-size: 18px;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		background: #00b9f4;
		margin: 30px auto;
		border-radius: 20px;
		padding: 40px;
		box-sizing: border-box;

		button {
			width: 160px;
			height: 60px;
			border-radius: 30px;
			color: #ffffff;
			background: #ffae0e;
		}
	}

	.table {
		margin-top: 50px;
		color: #666666;

		p {
			margin-right: 20px;
			cursor: pointer;
		}

		.active {
			color: #333333;
			font-weight: bold;
		}
	}

	.table-content {
		margin-top: 30px;

		.item {
			margin-bottom: 20px;
		}

		.avatar {
			margin-right: 16px;

			img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				background: #efefef;
			}

			img:last-child {
				position: relative;
				left: -10px;
			}
		}

		.item-right {
			p:last-child {
				font-size: 14px;
				padding-top: 10px;
				color: #999999;

				span {
					color: #ddc0cf;
				}
			}
		}
	}

	.dialog {
		button {
			width: 100%;
			height: 50px;
			border-radius: 10px;
		}
	}
}
</style>
